<template>
  <div class="catogory">
    <h3 class="title">{{ title }}</h3>
    <slot>默认内容</slot>
    <div class="footer">
      <slot name="footer">默认脚部</slot>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps(['title'])
</script>

<style scoped>
.title {
  background-color: orange;
  font-size: 20px;
  font-weight: 800;
  text-align: center;
}

.catogory {
  position: relative;
  background-color: cornflowerblue;
  width: 300px;
  height: 400px;
}

.footer {
  position: absolute;
  bottom: 20px;
  background-color: #777777;
  width: 100%;
}
</style>
